<template>
  <div class="comment_box">
    <!-- 发表评论 -->
    <el-row class="new_comment_box">
      <el-col :span="20">
        <el-input
          type="textarea"
          maxlength="255"
          autosize
          show-word-limit
          v-model="newComment"
          class="new_comment"
        ></el-input>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-button type="primary" size="small" @click="publishComment"
          >发表评论</el-button
        >
      </el-col>
    </el-row>
    <!-- 展示其他评论 -->
    <div v-for="comment in commentList" :key="comment.id">
      <!-- 评论人信息 -->
      <el-row class="other_comment">
        <el-col :span="2" class="comment_avatar">
          <el-avatar :size="42" :src="comment.user.avatar"></el-avatar>
        </el-col>
        <el-col :span="22">
          <p class="comment_uploader_name">{{ comment.user.nickname }}</p>
          <p class="comment_publish_time">
            {{ comment.createTime | timeFilter }}
          </p>
        </el-col>
      </el-row>
      <!-- 评论内容 -->
      <el-row>
        <el-col :span="21" :offset="2">
          <div>{{ comment.content }}</div>
          <CustomLine margin="14px 0" border="1px dashed #ccc" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import CustomLine from "@/components/CustomLine";
import { Loading } from "element-ui";
import axios from "@/request";

export default {
  name: "Comment",
  components: {
    CustomLine,
  },
  data() {
    return {
      newComment: "",
      commentList: [],
    };
  },
  props: ["itemId", "type"],
  mounted() {
    this.getItemComment();
  },
  methods: {
    getItemComment() {
      axios
        .get("/comment/getCommentListByItemId", {
          params: {
            itemId: this.itemId,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.commentList = res.data.data;
          } else {
            this.$message.error(res.data.data);
          }
        })
        .catch((e) => {
          this.$message.error(e);
        });
    },
    publishComment() {
      let loading = Loading.service({
        text: "正在发表评论...",
        target: ".comment_box",
      });
      console.log(this.$store.state.userModule.user.user.id);
      axios
        .post("/comment/publish", {
          type: this.type,
          uploaderId: this.$store.state.userModule.user.user.id,
          itemId: this.itemId,
          content: this.newComment,
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.data);
            this.getItemComment();
          } else {
            this.$message.error(res.data.data);
          }
          this.newComment = "";
          loading.close();
        })
        .catch((e) => {
          loading.close();
        });
    },
  },
};
</script>

<style scoped>
.new_comment_box {
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
}

.new_comment >>> .el-input__count {
  background: none;
}

.other_comment {
  display: flex;
  justify-content: flex-start;
  margin: 10px 0;
}

.comment_avatar {
  display: flex;
  justify-content: center;
}

.comment_uploader_name {
  margin: 0;
  font-size: 18px;
}

.comment_publish_time {
  margin: 0;
  font-size: 13px;
  color: grey;
  margin: 2px 0;
}
</style>